<template>
  <div
    class="bbs-list"
    :class="[
      set.ismobile ? 'mobile' : '',
      isBbsView ? 'item-active' : 'item-detach',
    ]"
    :style="{ display: isBbsView && set.ismobile ? showlist : '' }"
  >
    <keep-alive>
      <PostPage />
    </keep-alive>
  </div>

  <!--帖子详情-->
  <div class="bbs-detail mobile" :class="isBbsView ? 'active' : ''">
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>

  <div class="bbs-rigth hide-scrollbar" v-if="!isBbsView && !set.ismobile">
    <div
      v-if="list.length"
      v-for="item in list"
      style="
        padding: 10px;
        background-color: #fff;
        box-shadow: var(--el-box-shadow-light);
        border-radius: var(--rounded-btn);
        margin: 12px;
      "
    >
      <router-link :to="`/postlist/${item.cate_id}/${item.id}`">
        <!-- 列表顶部栏 S -->
        <el-row style="align-items: center">
          <el-col :span="19" style="display: flex">
            <el-tag type="warning" class="mx-1" size="small">置顶</el-tag>
            <el-text
              class="item-top-title-list time title"
              size="large"
              tag="b"
              style="margin-left: 0.5rem"
            >
              {{ item.title }}
            </el-text>
          </el-col>
        </el-row>
        <!-- 列表顶部栏 E -->

        <el-row
          style="
            align-items: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          "
        >
          <el-text class="mx-1 time item-content title">
            {{ item.summary }}
          </el-text>
        </el-row>

        <el-row style="align-items: center">
          <el-button link>
            <icon-view :size="18"></icon-view>{{ item.views }}
          </el-button>

          <el-button link>
            <el-icon :size="18" style="margin-right: 5px">
              <ChatDotSquare />
            </el-icon>
            {{ item.comments }}
          </el-button>

          <el-button
            link
            class="linkbtn"
            v-if="
              (userInfo.state.isLogin && item.uid == userInfo.data.id) ||
              userInfo.data.isAdmin
            "
          >
            <el-dropdown class="linkbtn">
              <span class="el-dropdown-link linkbtn">
                <el-icon class="numicon linkbtn">
                  <MoreFilled />
                </el-icon>
              </span>
              <template #dropdown class="linkbtn">
                <el-dropdown-menu class="linkbtn">
                  <el-dropdown-item
                    v-if="userInfo.data.isAdmin || item.uid == userInfo.data.id"
                    @click="edit(item)"
                    >编辑</el-dropdown-item
                  >
                  <el-dropdown-item
                    v-if="
                      (userInfo.data.isAdmin || item.uid == userInfo.data.id) &&
                      item.top == 0
                    "
                    @click="top(item)"
                    >置顶</el-dropdown-item
                  >
                  <el-dropdown-item
                    v-if="
                      (userInfo.data.isAdmin || item.uid == userInfo.data.id) &&
                      item.top == 1
                    "
                    @click="top(item)"
                    >取消置顶</el-dropdown-item
                  >
                  <el-dropdown-item
                    divided
                    @click="del(item)"
                    v-if="userInfo.data.isAdmin || item.uid == userInfo.data.id"
                  >
                    <el-text type="danger">删除</el-text>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-button>
        </el-row>
      </router-link>
    </div>

    <CountdownTimer />
  </div>
</template>

<script lang="ts">
import { watch } from 'vue'
import PostPage from '@comps/main/PostPage.vue'
import CountdownTimer from '@comps/main/cards/CountdownTimer.vue'
import Cfg from '@/config/config'
import Method from '@/globalmethods.ts'
import BbsItem from '@comps/main/bbs/item.vue'
import IconView from '@comps/icons/common/view.vue'
import { ElMessage } from 'element-plus'
import { api } from '@/apitypes'
export default {
  name: 'HomeLeft',
  data() {
    return {
      userInfo: Cfg.userInfo,
      isBbsView: false,
      set: Cfg.set,
      showlist: '',
      imgurl: '../../../public/image/101113174_p0.jpg',
      list: [] as any,
    }
  },
  components: {
    PostPage,
    CountdownTimer,
    BbsItem,
    IconView,
  },
  mounted() {
    this.updateTop()
    watch(
      () => this.$route.params,
      () => {
        if (this.$route.params.id) {
          this.isBbsView = true
          this.showlist = 'none'
        } else {
          this.isBbsView = false
          this.showlist = ''
        }
      },
      { immediate: true },
    )
  },
  methods: {
    edit(item: any) {
      this.$router.push(`/publish/${item.cate_id}/${item.id}`)
    },
    top(item: any) {
      let url = '/bbs/top'
      let top = item.top == 0 ? 1 : 0
      Method.api_post(url, { id: item.id, top: top }).then((res: any) => {
        let obj = res.data as api
        if (obj.code == 200) {
          ElMessage({
            type: 'success',
            message: top == 1 ? '置顶成功' : '取消置顶成功',
          })
          item.top = top
          this.updateTop()
        } else {
          ElMessage({
            type: 'error',
            message: obj.msg,
          })
        }
      })
    },
    del(id: number) {
      let url = '/bbs/del'
      if (Cfg.userInfo.data.isAdmin) url = '/bbs/lock_item'
      Method.api_post(url, { id: id }).then((res: any) => {
        let obj = res.data as api
        if (obj.code == 200) {
          ElMessage({
            type: 'success',
            message: obj.msg,
          })
          this.updateTop()
        } else {
          ElMessage({
            type: 'error',
            message: obj.msg,
          })
        }
      })
    },
    getName(id: number) {
      for (const el of Cfg.userInfo.cate_list) {
        if (el.id == id) return el.name
      }
    },
    /**
     * 刷新置顶
     */
    updateTop() {
      Method.api_get(`/bbs/top_list`)
        .then((response: any) => {
          let obj = response.data
          let list = []
          if (obj.code == 200) {
            // 格式化数据
            for (const el of obj.data) {
              el.cover = el.cover ? Method.getHostUrl(el.cover, true) : ''
              el.time = Method.formatBbsTime(el.time)
              el.likes = parseInt(el.likes)
              list.push(el)
            }
            this.list = list
          }
        })
        .catch((error: any) => {
          console.error(error)
        })
    },
    getImage() {
      fetch('https://image.anosu.top/pixiv/json')
        .then((res) => res.json())
        .then((data: any) => {
          if (data) {
            this.imgurl = data[0].url
          }
        })
    },
  },
}
</script>

<style scoped>
.cate-list,
.bbs-list,
.bbs-detail {
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 0%;
}

.bbs-detail.active {
  width: 100%;
  flex: 2;
}

.bbs-list {
  overflow: hidden;
  flex: 1;
}

.bbs-list.mobile {
  flex: 1;
  width: 100%;
}

/* .bbs-list.item-detach {
  width: 80%;
} */

.bbs-detail.active {
  width: 65%;
}

.bbs-detail.active.mobile {
  width: 100%;
  height: 100%;
}

.bbs-list.item-active {
  width: 50%;
}

.bbs-rigth {
  width: 100%;
  overflow-y: auto;
  flex: 0.7;
}

.bbs-rigth .image {
  width: 100%;
  border-radius: 8px;
}

.cate-list.active {
  width: 230px;
}

.cate-list .el-button.active {
  color: var(--el-button-hover-text-color);
  border-color: var(--el-button-hover-border-color);
  background-color: var(--el-button-hover-bg-color);
  outline: 0;
}
</style>
